﻿
<template>
    <section>



        <el-table :data="users"
                  style="width: 100%;margin-bottom: 20px;"
                  border
                  row-key="Id" 
                  default-expand-all
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                  :header-cell-style="{background:'#eee',color:'#606266'}">

            <el-table-column prop='CompanyName' label='公司名称' width=''>  </el-table-column>
            <el-table-column prop='Address' label='地址' width=''>  </el-table-column>
            <el-table-column prop='Telephone' label='联系电话' width=''>  </el-table-column>

            <el-table-column prop='SortCode' label='排序码' width=''>  </el-table-column>

            <el-table-column label='操作' width='350'>
                <template scope='scope'>

                    <el-button type='primary' @click='handleAdd(scope.$index, scope.row)'>增子公司</el-button>

                    <el-button size='small' @click='handleEdit(scope.$index, scope.row)'> 编辑 </el-button>
                    <el-button type='danger' size='small' @click='handleDel(scope.$index, scope.row)'> 删除 </el-button>
                </template>
            </el-table-column>

        </el-table>






        <!--编辑界面-->
        <el-dialog title='编辑' :visible.sync='editFormVisible' v-model='editFormVisible' :close-on-click-modal='false'>
            <el-form :model='editForm' label-width='80px' :rules='editFormRules' ref='editForm'>

                <!--<el-form-item label='主键' prop='Id'>
                    <el-input v-model='editForm.Id' auto-complete='off'></el-input>
                </el-form-item>-->



                <el-row>
                    <el-col :span="12">
                        <el-form-item label='公司名称' prop='CompanyName'>
                            <el-input v-model='editForm.CompanyName' auto-complete='off'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">


                        <el-form-item label='地址' prop='Address'>
                            <el-input v-model='editForm.Address' auto-complete='off'></el-input>
                        </el-form-item>

                    </el-col>
                </el-row>





                <el-row>
                    <el-col :span="12">

                        <el-form-item label='联系电话' prop='Telephone'>
                            <el-input v-model='editForm.Telephone' auto-complete='off'></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">

                        <el-form-item label='公司网站' prop='CompanyWebsite'>
                            <el-input v-model='editForm.CompanyWebsite' auto-complete='off'></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-form-item label='公司简介' prop='CompanyProfile'>
                    <el-input v-model='editForm.CompanyProfile' auto-complete='off' type="textarea" :rows="2"></el-input>
                </el-form-item>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label='纬度' prop='Lat'>
                            <el-input v-model='editForm.Lat' auto-complete='off'></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">

                        <el-form-item label='经度' prop='Lng'>
                            <el-input v-model='editForm.Lng' auto-complete='off'></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label='排序码' prop='SortCode'>
                          

                            <el-input-number v-model="editForm.SortCode" :min="1" :max="9999" label="排序码"></el-input-number>

                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label='有效标志' prop='EnabledMark'>
                            <!--<el-input v-model='editForm.EnabledMark' auto-complete='off'></el-input>-->

                            <el-radio-group v-model="editForm.EnabledMark">
                                <el-radio class="radio" :label="1">启用</el-radio>
                                <el-radio class="radio" :label="0">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label='创建用户' prop='CreateUserName'>
                            <el-input v-model='editForm.CreateUserName' auto-complete='off' disabled></el-input>
                        </el-form-item>
                        <el-form-item label='创建日期' prop='CreateDate'>
                            <el-input v-model='editForm.CreateDate' auto-complete='off' disabled></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">

                        <el-form-item label='修改用户' prop='ModifyUserName'>
                            <el-input v-model='editForm.ModifyUserName' auto-complete='off' disabled></el-input>
                        </el-form-item>
                        <el-form-item label='修改日期' prop='ModifyDate'>
                            <el-input v-model='editForm.ModifyDate' auto-complete='off' disabled></el-input>
                        </el-form-item>

                    </el-col>
                </el-row>

            </el-form>
            <div slot='footer' class='dialog-footer'>
                <el-button @click.native='editFormVisible = false'>取消</el-button>
                <el-button type='primary' @click.native='editSubmit' :loading='editLoading'>提交</el-button>
            </div>
        </el-dialog>



        <!--新增界面-->
        <el-dialog title='新增' :visible.sync='addFormVisible' v-model='addFormVisible' :close-on-click-modal='false'>
            <el-form :model='addForm' label-width='80px' :rules='addFormRules' ref='addForm'>


                <el-form-item label='公司名称' prop='CompanyName'>
                    <el-input v-model='addForm.CompanyName' auto-complete='off'></el-input>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label='地址' prop='Address'>
                            <el-input v-model='addForm.Address' auto-complete='off'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label='联系电话' prop='Telephone'>
                            <el-input v-model='addForm.Telephone' auto-complete='off'></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label='公司简介' prop='CompanyProfile'>
                    <el-input v-model='addForm.CompanyProfile' auto-complete='off' type="textarea" :rows="2"></el-input>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label='公司网站' prop='CompanyWebsite'>
                            <el-input v-model='addForm.CompanyWebsite' auto-complete='off'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label='排序码' prop='SortCode'>
                            <!--<el-input v-model='editForm.SortCode' auto-complete='off'></el-input>-->
                            <el-input-number v-model="addForm.SortCode" :min="1" :max="9999" label="排序码"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label='纬度' prop='Lat'>
                            <el-input v-model='addForm.Lat' auto-complete='off'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label='经度' prop='Lng'>
                            <el-input v-model='addForm.Lng' auto-complete='off'></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot='footer' class='dialog-footer'>
                <el-button @click.native='addFormVisible = false'>取消</el-button>
                <el-button type='primary' @click.native='addSubmit' :loading='addLoading'>提交</el-button>
            </div>
        </el-dialog>

    </section>
</template>

<script>

    import util from '../../../util/date'
    import { testapi, getPage_WY_Company, getList_WY_Company, getByID_WY_Company, edit_WY_Company, add_WY_Company, batchRemove_WY_Company, Remove_WY_Company } from '../../api/api';

    export default {
        data() {   // 全局变量
            return {


                filters: { name: '' },
                users: [],
                total: 0,
                page: 1,
                listLoading: false,
                sels: [],//列表选中列
                addDialogFormVisible: false,
                editFormVisible: false,//编辑界面是否显示
                editLoading: false,
                editFormRules: {
                    Id: [{ required: true, message: '请输入主键', trigger: 'blur' }],
                    CompanyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
                    CompanyPid: [{ required: true, message: '请输入母公司', trigger: 'blur' }],
                    Address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
                    Telephone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
                    CompanyProfile: [{ required: true, message: '请输入公司简介', trigger: 'blur' }],
                    CompanyWebsite: [{ required: true, message: '请输入公司网站', trigger: 'blur' }],
                    Lat: [{ required: true, message: '请输入纬度', trigger: 'blur' }],
                    Lng: [{ required: true, message: '请输入经度', trigger: 'blur' }],

                }
                ,
                //编辑界面数据
                editForm: {
                    Id: '',
                    CompanyName: '',
                    CompanyPid: '',
                    Address: '',
                    Telephone: '',
                    CompanyProfile: '',
                    CompanyWebsite: '',
                    Lat: '',
                    Lng: '',

                }
                ,
                addFormVisible: false,//新增界面是否显示
                addLoading: false,
                addFormRules: {
                    Id: [{ required: true, message: '请输入主键', trigger: 'blur' }],
                    CompanyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }
                        , { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }],
                    CompanyPid: [{ required: true, message: '请输入母公司', trigger: 'blur' }],
                    Address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
                    Telephone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }
                    //    ,
                    //{ type: 'email', message: '格式不对', trigger: 'blur' }

                    ],
                    CompanyProfile: [{ required: true, message: '请输入公司简介', trigger: 'blur' }],
                    CompanyWebsite: [{ required: true, message: '请输入公司网站', trigger: 'blur' }],
                    Lat: [{ required: true, message: '请输入纬度', trigger: 'blur' }],
                    Lng: [{ required: true, message: '请输入经度', trigger: 'blur' }],

                }
                ,
                //新增界面数据
                addForm: {
                    CompanyName: '',
                    CompanyPid: '',
                    Address: '',
                    Telephone: '',
                    CompanyProfile: '',
                    CompanyWebsite: '',
                    Lat: '',
                    Lng: '',

                }

            }
        },
        methods: {    // 全局方法

            handleCurrentChange(val) {
                this.page = val;
                this.getDtoPage();
            },
            // 测试
            sortKey(val) {
                console.log(val)
            },


            //获取用户列表
            getDtoPage() {
                let para = {
                    page: this.page,
                    key: this.filters.name
                };
                this.listLoading = true;

                testapi();

                getList_WY_Company(para).then((res) => {

                    this.users = res.data.response;


                    this.listLoading = false;

                });
            },
            //删除
            handleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let para = { id: row.Id };
                    Remove_WY_Company(para).then((res) => {
                        if (util.isEmt.format(res)) {
                            this.listLoading = false;
                            return;
                        }
                        this.listLoading = false;
                        if (res.data.success) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                        this.getDtoPage();
                    });
                }).catch((c) => {
                    console.log(c);
                });
            },
            //显示编辑界面
            handleEdit: function (index, row) {

                this.editFormVisible = true;
                let para_getGetByID = { id: row.Id };
                getByID_WY_Company(para_getGetByID).then((getDto) => {
                    this.editForm = Object.assign({}, getDto.data.response);
                });
            },
            //显示新增界面
            handleAdd: function (index, row) {
                this.addFormVisible = true;

                this.addForm = {
                    CompanyName: '',
                    CompanyPid: row.Id,
                    Address: '',
                    Telephone: '',
                    CompanyProfile: '',
                    CompanyWebsite: '',
                    Lat: '',
                    Lng: '',
                    EnabledMark: 1
                }
                    ;
            },
            //编辑
            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                        }).then(() => {
                            this.editLoading = true;
                            //NProgress.start();
                            let para = Object.assign({}, this.editForm);

                            edit_WY_Company(para).then((res) => {

                                if (util.isEmt.format(res)) {
                                    this.editLoading = false;
                                    return;
                                }
                                if (res.data.success) {
                                    this.editLoading = false;

                                    this.$message({
                                        message: res.data.msg,
                                        type: 'success'
                                    });
                                    this.$refs['editForm'].resetFields();
                                    this.editFormVisible = false;
                                    this.getDtoPage();
                                } else {
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'error'
                                    });
                                }
                            });
                        });
                    }
                });
            },
            //新增
            addSubmit: function () {
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                        }).then(() => {
                            this.addLoading = true;
                            let para = Object.assign({}, this.addForm);

                            add_WY_Company(para).then((res) => {

                                if (util.isEmt.format(res)) {
                                    this.addLoading = false;
                                    return;
                                }

                                if (res.data.success) {
                                    this.addLoading = false;
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'success'
                                    });
                                    this.$refs['addForm'].resetFields();
                                    this.addFormVisible = false;
                                    this.getDtoPage();
                                }
                                else {
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'error'
                                    });
                                }
                            });
                        });
                    }
                });
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            //批量删除
            batchRemove: function () {

                var ids = this.sels.map(item => item.Id).toString();
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    this.listLoading = true;
                    let para = { ids: ids };

                    batchRemove_WY_Company(para).then((res) => {
                        this.listLoading = false;

                        if (res.data.success) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                        this.getDtoPage();

                    });
                }).catch(() => {

                });
            }

            , expandAll() {
                var els = document.getElementsByClassName('el-table__expand-icon')  //获取点击的箭头元素

                for (let i = 0; i < els.length; i++) {
                    els[i].click()
                }
            }


        },
        mounted() {
            this.getDtoPage();
        },
        updated() {
            this.expandAll()
        },
    }

</script>

<style scoped>
</style>
